<template>
	<view class="wrap">
		<u-toast ref="addToast" />
		<u-form :model="evaluateForm" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :label-position="labelPosition" label="教练" prop="coachName" label-width="150">
				<u-input :border="border" type="select" v-model="evaluateForm.coachName" placeholder="请选择" @click="coachSelectShow = true"></u-input>
			</u-form-item>
			<u-select v-model="coachSelectShow" mode="single-column" :list="coachList" @confirm="coachSelectConfirm"></u-select>
			<u-form-item :label-position="labelPosition" label="好评" prop="star" label-width="150">
				<u-rate :count="count" v-model="evaluate.star" size="45" gutter="40" class="choice"></u-rate>
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="差评" prop="negativeFeedback" label-width="150">
				<u-input :border="border" type="select" :select-open="selectShow" v-model="negativeFeedback" placeholder="请选择"
				 @click="selectShow = true"></u-input>
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="详情" prop="comment" label-width="150">
				<!-- <u-input type="textarea" :border="border"  v-model="evaluate.intro" /> -->
				<u-input v-model="evaluate.comment" :type="type" :border="border" :height="height" :auto-height="autoHeight" />
			</u-form-item>
			<div class="box">
				<u-button @click="submit" class="submit" type="primary">提交</u-button>
			</div>
		</u-form>
		<u-select mode="single-column" :list="negativeFeedbackList" v-model="selectShow" @confirm="negativeFeedbackComfirm"
		 :default-value="negativeFeedbackList[0]"></u-select>
	</view>
</template>

<script>
	import api from '../../utils/api.js'
	export default {
		data() {
			let that = this;
			return {
				evaluateForm: {
					coachName: ''
				},
				toastTitle: '',
				toastType: '',
				negativeFeedback: '',
				coachSelectShow: false,
				coachList: [],
				type: 'textarea',
				border: false,
				height: 10,
				autoHeight: false,
				count: 5,
				evaluate: {
					coachId: '',
					star: 0,
					negativeFeedbackId: '0',
					comment: '',
				},
				negativeFeedbackList: [{
					label: '其他',
					value: 0
				}],
				rules: {
					coachName: [{
						required: true,
						message: '请选择教练姓名',
						trigger: 'change'
					}, ],
					star: [{
						type: 'number',
						min: 0,
						max: 5
					}]
				},
				check: false,
				selectStatus: 'close',
				actionSheetList: [],
				actionSheetShow: false,
				pickerShow: false,
				selectShow: false,
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['message'],
			};
		},
		created() {
			api.getUserCoachList().then((res) => {
				for (var i = 0; i < res.data.length; i++) {
					this.coachList.push({
						label: res.data[i].realName,
						value: res.data[i].id
					});
				}
			})

			api.getSettingValue(this.globalConst.NEGATIVE_COMMENT_KEY).then((res) => {
				console.log(res);
				for (var i = 0; i < res.data.length; i++) {
					this.negativeFeedbackList.push({
						label: res.data[i].settingValue,
						value: res.data[i].id
					});
				}
			})
		},
		computed: {
			borderCurrent() {
				return this.border ? 0 : 1;
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			clearForm() {
				this.evaluateForm.coachName = '';
				this.evaluate.coachId = '';
				this.evaluate.star = 0;
				this.evaluate.negativeFeedbackId = '';
				this.evaluate.comment = '';
				this.negativeFeedback = '';
			},
			showAddToast() {
				this.$refs.addToast.show({
					title: this.toastTitle,
					type: this.toastType,
					position: 'top',
					duration: 2000
				})
			},
			// 选择差评回调
			negativeFeedbackComfirm(res) {
				this.negativeFeedback = res[0].label;
				this.evaluate.negativeFeedbackId = res[0].value;
			},
			coachSelectConfirm(res) {
				this.evaluateForm.coachName = res[0].label;
				this.evaluate.coachName = res[0].label;
				this.evaluate.coachId = res[0].value;
			},
			submit() {
				if(this.evaluate.comment == "") {
					this.toastTitle = "详情不能为空！";
					this.toastType = "warning";
					this.showAddToast();
					return;
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {
						api.addEvaluate(this.evaluate).then((res) => {
							if (res.code === 0) {
								this.toastTitle = "评价成功";
								this.toastType = "success";
								this.showAddToast();
								this.clearForm();
							} else {
								this.toastTitle = "评价失败, 请稍后重试";
								this.toastType = "error";
								this.showAddToast();
							}
						})
					} else {
						this.toastTitle = "请按正确的规则填写评价";
						this.toastType = "warning";
						this.showAddToast();
					}
				});
			},
		}
	};
</script>

<style scoped lang="scss">
	.wrap {
		padding: 50rpx;
	}

	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;

		.agreement-text {
			padding-left: 8rpx;
			color: $u-tips-color;
		}
	}

	.star {
		padding: 50rpx;
	}

	.submit {
		position: absolute;
		display: block;
		width: 50%;
		margin-top: 30%;
		margin-left: 25%;
	}

	.box {
		position: relative;
	}

	.choice {
		margin-left: 12%;
	}

	.text {
		font-size: 35rpx;
		margin-left: 9px;
	}
</style>
